<template>
	<view class="scrollYView">
		<scroll-view scroll-x class="bg-white nav fixed" style="height:8vh">
			<view class="flex text-center">
				<view class="cu-item flex-sub":class="index===active?'text-theme cur':''"v-for="(item, index) in menuList" :key="index" @tap="CheckType(index)" :data-id="index">
					<view>{{item.title}}</view>
					<text class='cu-tag badge' v-if="orderStatus[item.tag]>0">{{orderStatus[item.tag]}}</text>
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" style="padding-top: 100rpx;">
			<view v-if="!orderList.length" class='empty'>
			   <view style="margin-top:300rpx;text-align: center">
				   <view class="cuIcon-calendar" style="font-size: 30px;"></view>
				   <view class="text-cut text-lg margin-top-sm">暂无数据</view>
			   </view>
			</view>
			<view v-for="(seller, index) in orderList" :key="index">
				<view class="cu-list menu card-menu margin-top">
					<view class="cu-item" style="padding-top: 20px;">
						<view class="content">
							<view class="text-sm">订单编号:<text class="text-grey margin-left-sm">{{seller.sn}}</text></view>
							<view class="text-sm" style="margin:0 0 20rpx">创建时间:<text class="text-grey margin-left-sm">{{checktime(seller.create_time)}}</text></view>
						</view>
					</view>
					<view class="cu-item padding" style="min-height: 240rpx;align-items: flex-start;padding-bottom: 30rpx;" v-for="(item,index1) in seller.sku_list" :key="index1">
						<view class="cu-avatar radius goodsImg" :style="'background-image:url('+item.goods_image+');'" @tap="goOrderDetail(seller.sn)"></view>
						<view class="content flex-column margin-left" style="align-items: flex-start;">
							<view class="flex-column justify-start" style="width:100%;">
								<view class="flex" style="align-items: flex-start;width:100%;"  @tap="goOrderDetail(seller.sn)">
									<view style="flex:1;">
										<view class="text-sm" style="line-height: 32upx;font-weight: 400;">{{item.name}}</view>
										<view class="text-gray">
											<text style="background-color: #eee;padding: 3px 4px;font-size: 22upx;">
												{{item['spec_list'][0].spec_value || '默认'}}
											</text>
										</view>
									</view>
									<view class="singlePrice" style="line-height: 32upx;">
										<text class="text-gray text-sm">￥{{formatPrice(item.goods_type==='INDUCTION'?item.cost:izmember?item.cost:item.subtotal)}}</text>
										<text class="text-gray text-sm" style="text-align: right;">x{{item.num}}</text>
									</view>
								</view>
							</view>
							<view class=" text-sm" style="display: flex;width: 100%;"  @tap="goOrderDetail(seller.sn)">
								<text class="radius" style="color:#ff7435;background:#fff1ec;padding: 3px 4px;font-size: 22upx;">
									48小时内发货
								</text>
							</view>
							<view class="text-sm" v-if="seller.order_status === 'CANCELLED'"  @tap="goOrderDetail(seller.sn)">
								<text style="font-size: 22upx;">
									订单状态：{{seller.order_status_text}}
								</text>
							</view>
							<view class="action text-sm flex justify-end align-center" style="width: 100%;vertical-align: center;" v-if="index1+1===seller.sku_list.length">
								<view class="text-grey">共{{seller.sku_list.length}}件</view> 
								<view class="text-black" style="margin-left: 6upx;">{{seller.order_status==='CONFIRM'?'需':'实'}}付款:</view>
								<view class="text-red text-lg text-bold">￥{{formatPrice(seller.order_amount)}}</view>
							</view>
							<view class="flex" v-if="seller.order_status !== 'CANCELLED' && index1+1===seller.sku_list.length" style="justify-content: flex-end;padding-bottom: 15px;height: 80rpx; width:100% ;">
								<view class="flex" style="justify-content: flex-end;">
									<button class="cu-btn round line-grey text-black text-sm" style="width:160rpx;" v-if="seller.order_status==='CONFIRM' || seller.order_status==='SHIPPED'" @tap="checkOrderType(seller)">{{checkOrderStatus(seller.order_status)}}</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 20px;"></view>
			<view class="loading-text" v-if="finished && orderList.length">{{ loadingText }}</view>
		</scroll-view>
	</view>
</template>

<script>
	import * as Order_API from '@/api/order.js'
	import * as Foundation from '@/utils/Foundation.js'
	export default {
		data() {
			return {
				active:0,
				menuList:[
					{
						title:"全部",
						tag:''
					},
					{
						title:"待付款",
						tag:'wait_pay_num'
					},
					{
						title:"待发货",
						tag:'wait_ship_num'
					},
					{
						title:"已发货",
						tag:'wait_rog_num'
					},
					{
						title:"已完成",
						tag:''
					}],
				orderList:[],
				params:{
					page_no:1,
					page_size:20
				},
				count:0,
				isEdit:false,
				type:'',
				orderStatus:uni.getStorageSync('orderStatus')||{},
				izmember:uni.getStorageSync('role').id?true:false,
				finished:false,
				loadingText:'加载完毕'
			};
		},
		watch:{
			active(newVal) {
				this.active = newVal
				if(this.active=== 1){
					this.params.order_status = 'WAIT_PAY'
				} else if(this.active=== 2){
					this.params.order_status = 'WAIT_SHIP'
				} else if(this.active=== 3){
					this.params.order_status = 'WAIT_ROG'
				}else if(this.active=== 4){
					this.params.order_status = 'COMPLETE'
				}else if(this.active=== 0){
					this.params.order_status = 'ALL'
				}
			},
			type(newVal) {
				this.type = parseInt(newVal)
				this.active = parseInt(newVal)
			}
		},
		onLoad(e) {
			// console.log('1111111', e)
			if(e.type){
				this.active = e.type,
				this.type = e.type
			}
			if(e.active){
				this.active = e.active
			}
		},
		onShow() {
			console.log('oder',this.active)
			this.CheckType(this.active)
		},
		onPullDownRefresh() {
			setTimeout(()=> {
				uni.stopPullDownRefresh()
				this.type = this.active
				this.params.page_no =1
				this.orderList = []
				this.finished = false
				this.GET_OrderList()
			}, 200);
		},
		onReachBottom(){
			setTimeout(()=> {
				this.params.page_no +=1
				// this.CheckType(e)
				this.GET_OrderList()
			}, 200);
		},
		methods:{
			GET_OrderList(e){
				// this.CheckType(e)
				if (!this.finished){
					Order_API.getOrderList(this.params).then(res=>{
						if(res.data.length<1 || !res.data){
							this.finished = true
							this.loadingText = '到底了'
						}else{
							this.orderList = [...this.orderList,...res.data]
							this.loadingText = '查看更多'
						}
					}).catch(()=>{
						this.loadingText = '到底了'
					})
					Order_API.getOrderStatusNum().then(res =>{
						this.orderStatus = res
						uni.setStorageSync('orderStatus',res)
					})
				}
			},
			CheckType(e){
				this.scrollLeft = (e - 1) * 60
				this.active = e
				this.finished = false
				this.params.page_no = 1
				this.orderList = []
				this.GET_OrderList()
			},
			goOrderDetail(sn){
				uni.navigateTo({
					url:'./orderDetail?sn='+sn+'&active='+this.active
				})
			},
			checkOrderType(params){
				switch(params.order_status){
					case 'CONFIRM':
					this.izcancelOrder = true
					this.izNeddPay = true
					return this.pay(params)
					case 'PAID_OFF':
					this.izcancelOrder = true
					return "提醒卖家发货"
					case 'SHIPPED':
					this.izconfirmRog = true
					return this.confirmRog(params)
					case 'ROG':
					this.izdelOrder = true
					return "去评价"
					case 'CANCELLED':
					this.izdelOrder = true
					return "取消订单"
					case 'AFTER_SERVICE':
					return "查看售后"
				}
			},
			checkOrderStatus(order_status){
				switch(order_status){
					case 'CONFIRM':
					return "去付款"
					case 'PAID_OFF':
					return "提醒卖家发货"
					case 'SHIPPED':
					return "确认收货"
					case 'ROG':
					return "去评价"
				}
			},
			pay(params){
				uni.navigateTo({
					url:'../pay/payment?amount='+params.order_amount+'&sn='+params.sn
				})
			},
			confirmRog(params){
				uni.showModal({
					title: '收货提示',
					content: '你确定已收到购买的商品?',
					success: (res)=>{
						if (res.confirm) {
							Order_API.confrimRog(params.sn).then(res=>{
								if(res === 'SUCCESS'){
									uni.showToast({
										icon:'success',
										title:'收货成功'
									})
								}else{
									uni.showToast({
										icon:'none',
										title:'确认收货失败'
									})
								}
								this.GET_OrderList(this.active)
							})
						} 
					}
				})
			},
			delOrder(){
				uni.showModal({
					title: '删除提示',
					content: '你确定要删除该订单吗?',
					success: (res)=>{
						if (res.confirm) {
							Order_API.deleteOrder(this.sn).then(res =>{
								uni.showToast({
									icon:'success',
									title:'删除成功'
								})
								// console.log(this.active)
								this.GET_OrderList(this.active)
							})
						}
					}
				})
			},
			showModal(){
				this.cancelshowModal = true
			},
			hideModal(){
				this.cancelshowModal = false
			},
			checktime(date){
				return Foundation.unixToDate(date)
			},
			formatPrice(price){
				return Foundation.formatPrice(price)
			}
		}
	}
</script>

<style lang="scss">
	.fixed{
		position: fixed;
		z-index: 19999;
		top:0
	}
.list{
  height: 93vh;
}
.list .item{
  display: flex;
  border-bottom: 1px solid #EDEDED;
  padding: 0 16px;
  height: 95px;
  align-items: center;
}
.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}
.list .label{
  flex: 0 0 auto;
  padding:10px 0;
}

.list .content{
  flex-grow: 1;
  display:flex;
}

.list .content image{
  flex: 0 0 auto;
  height: 76px;
  width: 76px;
  padding-right:10px;
}

.list .content .text{
  flex-grow: 1;
  font-size: 14px;
}

.list .content .title{
  overflow: hidden;
}

.list .content .spec{
  font-size: 12px;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 24px;    
  max-height: 24px;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.list .content .price{
  display: flex;
  font-size: 16px;
}

.list .content .price text:nth-child(1){
  color: #ff5f19;
  flex: 1 0 50%;
}

.list .content .price text:nth-child(2){
  color: #999999;
  flex: 1 0 50%;
  text-align: right;
}
/deep/.cu-list.menu>.cu-item:after {
		border-bottom: none;
		height: 60upx;
	}
	/deep/.cu-list.menu>.cu-item  {
	min-height: 80rpx;
	}
	/deep/.cu-list.menu>.cu-item .content>text[class*=cuIcon] {
		width: 18px;
		text-align: left;
	}
.goodsImg{
	width: 180upx;
	height: 180upx;
}
.empty{
	  width: 100%;
	  height: 85vh;
	  display: flex;
	  justify-content: center;
	  align-cartList: center;
	  color: #666;
	  font-size: 28upx;
	  padding-bottom: 80upx;
}
/deep/.cu-tag.badge {
	border-radius: 200rpx;
	position: relative;
	top: -116rpx;
	right: 10px;
	font-size: 20rpx;
	padding: 0rpx 10rpx;
	height: 28rpx;
	color: #ffffff;
	left: 50rpx;
}
.singlePrice{
	display: flex;
	flex-direction: column;
	margin-left: 10rpx;
}
</style>
